<template>
  <div class="handle-table-box">
    <div class="search-box">
      <el-input
        v-model="searchKeyWord"
        style="width: 15vw; margin-right: 1vw"
        placeholder="请输入申请人姓名"
      />
      <el-button
         type="primary"
         @click="getFlowListByName"
      >
        搜索
      </el-button>
      <el-button
        @click="cancelSearch"
      >取消</el-button>
    </div>

    <el-table
        :data="tableData"
        stripe
        style="width: 100%; margin-top: 2vh;height: 83vh"
        border
        max-height="83vh"
        empty-text="暂无数据"
    >
      <el-table-column
          prop="flow_index"
          label="ID"
          width="80"
          align="center"
      />
      <el-table-column
          prop="flow_uploader_name"
          label="申请人"
          width="150"
          align="center"
      />
      <el-table-column
          label="申请时间"
          width="200"
          align="center"
      >
        <template #default="{row}">
            {{ computedDate(row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column
          prop="flow_type"
          label="流程类型"
          align="center"
          width="150"
      >
        <template #default="{row}">
          <div v-if="row.flow_type === 0">
            <el-tag>
              请假
            </el-tag>
          </div>
          <div v-if="row.flow_type === 1">
            <el-tag>
              用印
            </el-tag>
          </div>
          <div v-if="row.flow_type === 2">
            <el-tag>
              报销
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          prop="flow_status"
          label="状态"
          align="center"
          width="150"
      >
        <template #default="{row}">
          <div v-if="row.status === 0">
            <el-tag type="info">
              等待处理
            </el-tag>
          </div>
          <div v-if="row.status === 1">
            <el-tag type="warning">
              正在处理
            </el-tag>
          </div>
          <div v-if="row.status === 2">
            <el-tag type="success">
              处理完成
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          prop="operator_name"
          label="当前/最后审批人"
          align="center"
          width="150"
      />
      <el-table-column
        prop="flow_detail"
        label="理由/说明/备注"
        width="650"
        align="center"
      />
      <el-table-column
          label="操作"
          align="center"
      >
        <template #default="{row}">
          <el-button
              type="primary"
              size="small"
              @click="toHandle(row.flow_id)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <HandleDialog ref="handleALL" @reloadAll="getFlowList"/>
</template>

<script setup>
import {ElTable, ElTableColumn, ElTag, ElButton, ElMessage, ElInput} from "element-plus"
import {onMounted, reactive, ref} from "vue"
import {getHandleList, checkFlowByName, getCurrentFlow} from "@/api"
import HandleDialog from "@/components/OA/Leave/MyHandled/HandleDialog.vue"
import emitter from "@/lib/eventBus.js"
import {useRoute, useRouter} from "vue-router"

let currentUser

const route = useRoute()
const router = useRouter()

const handleALL = ref()
const tableData = ref([])
const searchKeyWord = ref('')

onMounted(() => {
  // emitter.emit('home_menu','/OA/my-handled/all')
  emitter.emit('update','/OA/my-handled/all')
  if (route.path !== '/OA/my-handled/all') router.push('/OA/my-handled/all')
  // getUser()
  getUser()
  getFlowList()
})


const getUser = () => {
  currentUser = JSON.parse(localStorage.getItem('syhyDocManSys'))
}

const getFlowList = async () => {
  try {
    tableData.value = []
    const {data:res} = await getHandleList({
      id:currentUser.id
    })
    // console.log(res,123)
    if(res.code === 200){
      tableData.value = res.data
    } else if (res.code === 201) {
      // return ElMessage({
      //   message:'暂无我处理的数据',
      //   type:'info',
      // })
    } else {
      return ElMessage({
        message:'获取列表失败123',
        type:'error',
      })
    }
  } catch (e) {
    console.log(e)
  }
}

const computedDate = (date) => {
  return date.substring(0,10)
}

const getFlowListByName = async () => {
  try {
    const {data:res} = await checkFlowByName({
      uploaderName : searchKeyWord.value,
      userId : currentUser.id
    })
    if(res.code === 200 && res.data && res.data.length !==0){
      tableData.value = res.data
    } else if (res.code === 201) {
      // return ElMessage({
      //   message:'未查询到该用户发起的流程',
      //   type:'info'
      // })
    } else {
      return ElMessage({
        message:'查询数据失败',
        type:'error'
      })
    }
  } catch (e) {
    console.log(e)
  }

}

const cancelSearch = () => {
  searchKeyWord.value = ''
  getFlowList()
}

const showDetails = async (id) => {
  try {
    const {data:res} = await getCurrentFlow({
      flowId:id
    })
    if(res.code === 200){
      detail_form = res.data.info
      handleDialogVisible.value = true
    } else {
      ElMessage({
        message:'获取失败',
        type:'error'
      })
    }
  } catch (e) {
    console.log(e)
  }
}

const toHandle = (id) => {
  handleALL.value.showDetails(id)
}
</script>

<style scoped lang="less">
.search-box{
  padding-left: 2vw;
  padding-top: 1vh;
  text-align: left;
}
</style>
